<template>
	<view>
		<view class="form">
			<view class="cu-form-group">
				<view class="title">项目</view>
				<input placeholder="请输入项目名称" v-model="name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">日期</view>
				<picker mode="date" :value="date" start="2015-09-01" @change="DateChange()">
					<view class="picker">{{ date }}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">数据类别</view>
				<picker @change="pickerChange($event)" :value="pickerText" :range="pickerList" range-key="value">
					<view class="picker">{{pickerList[pickerIndex].value}}</view>
				</picker>
			</view>
			
			<view class="cu-form-group">
				<view class="title">上报数据说明</view>
			</view>
			<view class="cu-form-group" style="padding-top: 0; border: none;">
				<textarea maxlength="-1" placeholder="请填写已完成的工作" style="margin-top: 0; height: 180rpx;" v-model="explain"></textarea>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">备注</view>
				<textarea maxlength="-1" placeholder="请输入备注信息"></textarea>
			</view>
			<view class="cu-form-group" @tap="chooseImage()">
				<view class="title">附件</view>
				<text class='cuIcon-file text-yellow icon'></text>
			</view>
			<view class="file-list">
				<view v-for="item in fileList" :key="item">
					<view class="li">
						<view class="name">{{ item }}</view>
						<text class="cuIcon-deletefill icon-del text-gray"></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group" @tap="getLocation()">
				<view class="title">获取当前地址</view>
				<text v-if="location == ''" class='cuIcon-location text-blue icon'></text>
				<text v-else class='cuIcon-roundcheckfill text-green icon'></text>
			</view>
		</view>
		
		<button class="cu-btn btn-default btn" @tap="submitData()">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				date: this.getDate({ format: true }),
				pickerText: '文本',
				pickerIndex: 0,
				pickerList: [
					{ value: '文本', name: 'text' },
					{ value: '数值', name: 'number'},
					{ value: '图片', name: 'pic'},
					{ value: '文档', name: 'word'},
					{ value: '富文本', name: 'fwb'},
					{ value: '链接', name: 'link'},
				],
				fileList: [],
				explain: '',   // 数据说明
				location: '',
			}
		},
		methods: {
			pickerChange(e) {
				let val = parseInt(e.detail.value)
				this.pickerIndex = val;
				this.pickerText = this.pickerList[val].value
			},
			
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log(res);
						this.uploadImage(res.tempFilePaths[0]);
					}
				});
			},
			
			uploadImage(filePaths) {
				uni.showLoading({
					title: '请稍后'
				})
				let token = getApp().globalData.token;
				uni.uploadFile({
				    url: getApp().globalData.url + '/blade-resource/oss/endpoint/put-file',
				    filePath: filePaths,
				    name: 'file',
				    formData: {},
				    header: {
						"Content-Type": "multipart/form-data",
						'blade-auth': "bearer " + token
					},
				    success:(res) => {
						console.log(res);
				        if (res.data.code == 200){
				            console.log('文件上传成功')
				        }
						uni.hideLoading()
				    },
					fail: (res) => {
						console.log(res);
						uni.hideLoading()
						uni.showToast({
							title: '上传失败',
							icon: 'none',
							duration: 2000
						})
					},
					complete: (res) => {
						console.log(res);
						uni.hideLoading()
						uni.showToast({
							title: '上传失败',
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			
			getLocation() {
				console.log(123);
				uni.showLoading({
					title: '获取中'
				})
				uni.getLocation({
				    type: 'wgs84 ',
				    success: (res) => {
				        console.log('经度：' + res.longitude);
				        console.log('纬度：' + res.latitude);
						this.location = res.longitude + ',' + res.latitude
						uni.showToast({
							duration: 2000,
							title: '获取成功',
							icon: 'none'
						})
						uni.hideLoading()
				    },
					fail: (res) => {
						console.log(res);
						uni.showToast({
							duration: 2000,
							title: '获取定位失败',
							icon: 'none'
						})
						uni.hideLoading()
					},
					complete: (res) => {
						console.log(res);
						uni.hideLoading()
					}
				});
			},
			
			submitData() {
				uni.showLoading();
				let token = getApp().globalData.token;
				uni.request({
					url: getApp().globalData.url + '/blade-visual/dataitem/save',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						'blade-auth': "bearer " + token
					},
					method: "post",
					data: {
						attachFile: [],
						// dataItemCode: "ceshi",
						dataItemName: this.name,
						dataItemSource: "inside",
						dataItemType: this.pickerText,
						dataItemValue: this.explain,
						standy1: this.location,  // 定位
					},
					success: (res) => {
						console.log(res);
						let code = res.data.code;
						if (code == 200) {
							uni.showToast({
								duration: 2000,
								title: '提交成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								duration: 2000,
								title: '提交失败',
								icon: 'none'
							})
						}
						uni.hideLoading();
					}
				});
			},
			
		}
	}
</script>

<style scoped>
	.icon {
		font-size: 44rpx!important;
	}
	
	.btn {
		width: calc(100% - 60rpx);
		margin: 80rpx 30rpx;
	}
	
	.file-list {
		padding: 1px 16px 16px;
		background: #fff;
		border-bottom: 2rpx solid #eee;
	}
	
	.file-list .li {
		height: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.file-list .name {
		width: calc(100% - 60rpx);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.file-list .icon-del {
		font-size: 32rpx;
		padding-left: 20rpx;
	}
	    
</style>
